<template>
    <div id="tmpl">
      <div class="count" @click="sub">-</div>
      <div class="count">{{count}}</div>
      <div class="count" @click="add">+</div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                count:1,
            }
        },
      methods:{
        sub(){

         this.count--;
          if(this.count<1){
            this.count=1
          }
         this.sendData();
        },
        add(){
          this.count++;
          this.sendData();
        },
        sendData(){
            this.$emit('dataObj',this.count)
        }
      },
      mounted(){

      },
    }
</script>

<style scoped>
  .count{
    height: 27px;
    width: 27px;
    border: 1px solid black;
    text-align: center;
    line-height: 27px;
    display: inline-block;
    margin-bottom: 15px;
    margin-top: 15px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
